<template>
	<view class="tabbar">
		<view class="tabbar-item" @click="tolink"> 
			<image class="tabbar-item-imgsize" src="../../static/images/childtabbar2.png" mode=""></image>
			<text>{{tabbarData[0].name}}</text>
		</view>
		<view class="tabbar_line"></view>
		<view class="tabbar-item">
			<image class="tabbar-item-imgsize" src="../../static/images/childtabbar3.png" mode=""></image>
			<text>{{tabbarData[1].name}}</text>
		</view>
		<view class="tabbar_line"></view>
		<view class="tabbar-item">
			<image class="tabbar-item-imgsize" src="../../static/images/childtabbar4.png" mode=""></image>
			<text>{{tabbarData[2].name}}</text>
		</view>
		<view class="tabbar_line"></view>
		<view class="tabbar-item">
			<image class="tabbar-item-imgsize" src="../../static/images/childtabbar1.png" mode=""></image>
			<text>{{tabbarData[3].name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			tabbarData:{
				type: Array,
				default: []
			}
		},
		methods: {
			tolink() {
				this.$utils.navto(this.tabbarData[0].link)
			}
		}
	}
</script>

<style scoped>
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20upx 30upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	z-index: 9;
	font-size: 28upx;
	box-shadow:0px 0px 6px 0px rgba(0,0,0,0.16);
}
.tabbar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tabbar-item-imgsize {
	width: 48upx;
	height: 48upx;
}
.tabbar_line {
	height: 60upx;
	width: 1px;
	background-color: #DCDCDC;
}
</style>
